<template>
  <!-- 科室订单 -->
  <div class="box main-content-container">
    <div ref="search">
      <el-form label-width="auto" class="top mt10" style="padding-bottom: 10px">
        <el-row class="moutend" style="margin-top:10px">
          <!-- <el-col :span="6">
          <el-input v-model="search.customerName" class="inputCss" placeholder="姓名、手机号、会员号" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleChange">搜索</el-button>
          <el-button type="text" @click="eliminate">清除</el-button>
        </el-col> -->
          <el-col :span="14" class="searchs-y">
            <el-form ref="searchs" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="search.customerName" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                  <el-button slot="append" icon="el-icon-search" @click="handleChange" />
                </el-input>
                <el-form-item v-if="false" class="spn buttons clear-button">
                  <el-button type="primary" @click="eliminate">清除</el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4" :offset="6" style="text-align: right" class="buttons">
            <el-button @click="seeRecharge"> +充值 </el-button>
            <el-button @click="handleEadit(1)"> +开单 </el-button>
          </el-col>
        </el-row>
        <el-row type="flex" class="mt10">
          <Search :data="yTSDay" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <el-form-item style="margin-left: 10px">
            <el-select v-model="search.orderType" class="el-select-y" placeholder="请选择类型" clearable @change="getList">
              <el-option key="1" label="全款" value="全款" />
              <el-option key="2" label="预定" value="预定" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px">
            <el-select v-model="search.orderManId" class="el-select-y" filterable placeholder="请选择开单人" clearable @change="getList">
              <el-option v-for="item in options" :key="item.id" :label="item.usrName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="mounteds mt10">
          <!-- <Search :data="tabsName" :attribute="'createdTime'" @change="handleTypeChange" /> -->
          <Tabs v-model="orderStatus" :data="tabsName" @change="searchChange" />
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="list1" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="dataCode" label="订单号" :show-overflow-tooltip="true" />
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
        <el-table-column prop="orderContent" label="订单内容" :show-overflow-tooltip="true" />
        <el-table-column prop="amount" label="金额" :show-overflow-tooltip="true" />
        <el-table-column prop="createdTime" label="开单时间" :show-overflow-tooltip="true">
          <!-- 无 -->
          <template slot-scope="{ row }">
            <span>{{ parseTime(row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderMan" label="开单人" :show-overflow-tooltip="true" />
        <el-table-column prop="orderType" label="类型" :show-overflow-tooltip="true" /><!-- 无 -->
        <el-table-column prop="orderStatus" label="状态" :show-overflow-tooltip="true" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="seeDetails(true,row.id,row.customerId)">查看</el-button>
            <el-button v-if="row.orderStatus==='待付款'" type="text" @click="handleEadit(row)">修改</el-button>
            <el-button v-if="row.orderStatus==='待付款'" type="text" @click="orderCancel(row.id)">取消</el-button>
            <el-button v-if="row.orderStatus==='已付定金'||row.orderStatus==='已付款'" type="text" @click="chargeBack(true, row)">退款</el-button>
            <el-button v-if="row.orderStatus==='退款中'" type="text" @click="withdraw(row.id)">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <OrderDetails :visible.sync="visible" :order-details-id="orderDetailsId" :customer-id="customerId" @seeDetails="seeDetails" />
    <Chargeback :visible.sync="visible1" :customer-data="customerData" :title="title" @chargeBack="chargeBack" />
    <Billing ref="billing" :billing-data="billingData" :choice="choice" :bill-type="'科室开单'" />
    <Recharg :visible.sync="rechargVisible" :ids="ids" @cancels="rechargVisible=false,ids=''" />
  </div>
</template>
<script>
// import { DictionarySelector } from '@rabbit.do/rabbit';
import Search from '@/components/Search';
import { yTSDay } from "@/config";
import OrderDetails from "./orderDetails.vue";
import Chargeback from "./chargeback.vue";
import Tabs from '@/components/SearchSelection';
import Billing from '@/views/lobby/doctor/billing.vue';// 修改
import Recharg from '@/views/lobby/task/recharge.vue';
import { lookup } from '@/utils/common';
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    // DictionarySelector,
    OrderDetails,
    Chargeback,
    Tabs,
    Billing,
    Recharg,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      loading: false,
      title: '',
      orderDetailsId: '',
      customerId: '',
      url: '',
      ids: '',
      custQuery: "",
      yTSDay,
      visible: false,
      billing: false,
      consultantValue: '',
      billingData: {},
      visible1: false,
      rechargVisible: false,
      orderStatus: '待付款',
      remedyType: '不限制就诊类型',
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      customerData: {},
      searchForm: {
        value3: '',
      },
      list1: [],
      input3: '',
      options: [],
      tabsName: [
        { id: '全部', name: "全部" },
        { id: '待付款', name: "待付款" },
        { id: '已付款', name: "已付款" },
        { id: '已取消', name: "已取消" },
        { id: '退款中', name: "退款中" },
        { id: '已退款', name: "已退款" },
      ],
      search: {
        'orderStatus': '待付款',
        'timeType': 'today',
        'createdTime': new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 00:00:00" + '_' + new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 23:59:59",
      },
      values: 1, // 控制表格是待咨询还是已咨询的
      choice: true,
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.currentUserInfo;
    },
  },
  created() {
    if (this.$route.query.isPopup) {
      this.$router.push({
        query: {},
      });
    }
    this.$nextTick(function() {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  mounted() {
    // Object.assign(this.search, { "deptId": this.userInfo.deptUsrList[0].deptId });
    this.options = [];
    const options = lookup();
    const deptUsrList = this.userInfo.deptUsrList;
    deptUsrList.forEach(item => {
      options.forEach(json => {
        if (item.usrId === json.id) {
          this.search.deptId = json.deptString;
          json.usrName = "只看我";
        }
        if (json.deptString.indexOf(item.deptId) > -1) {
          this.options.push(json);
        }
      });
    });
    this.getList();
    var topHeight = (this.$refs.search.clientHeight + 160 + 80);
    var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
    this.innerHeight = winHeight - topHeight;
    console.log(this.innerHeight);
  },
  methods: {
    eliminate() {
      this.search.customerName = "";
      this.queryParams.page = 1;
      this.handleChange();
    },
    handleChange() { // 顶部搜索框点击搜索按钮
      this.queryParams.page = 1;
      this.getList();
    },
    handleEadit(row) { // 点击修改
      if (row === 1) {
        this.billing = true;
        this.billingData = { orderPaymentStyle: "全款", customerName: '' };
        this.choice = true;
        this.$refs.billing.createBill(this.billingData);
      } else {
        this.billingData = row;
        this.choice = false;
        this.$refs.billing.editBill(row);
      }
    },
    async orderCancel(id) { // 取消
      const confirmResult = await this.$confirm('请确认是否取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult === 'confirm') {
        this.loading = true;
        this.$api['doctor/consulting/orderCancel']({ 'id': id }).then(res => {
          if (res.code !== 200) return;
          this.getList();
          this.loading = false;
          return this.$message.success('已取消成功');
        });
      }
    },
    async withdraw(id) { // 点击撤回按钮
      const confirmResult = await this.$confirm('请确认是否撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消撤回');
      } else {
        this.$api['doctor/consulting/rebackOrder']({ id }).then(res => {
          if (res.code !== 200) return;
          this.getList();
        });
      }
    },
    seeDetails(bool, id, customerId) { // 点击查看
      if (id) {
        this.orderDetailsId = id;
        this.customerId = customerId;
      }
      this.visible = bool;
    },
    chargeBack(bool, row) { // 点击退单
      this.visible1 = bool;
      if (!bool) {
        this.customerData = {};
        this.getList();
      }
      if (row) {
        this.customerData = { 'customerId': row.customerId, 'id': row.id };
        if (row.orderStatus === '已付款') {
          this.title = '退单';
        } else if (row.orderStatus === '已付定金') {
          this.title = '退单-定金';
        }
      }
    },
    clearNoNum(obj) { // 控制输入框的输入内容
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');// 只能输入两个小数
    },
    async seeRecharge() { // 点击充值按钮
      this.rechargVisible = true;
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    getList() { // 请求列表的数据
      console.log("科室订单数据");
      if (!this.search.orderManId) this.search.orderManId = undefined;
      this.search.billType = "科室开单,科室处方单";
      this.$api['doctor/consulting/list']({ ...this.queryParams, query: this.search }).then(res => {
        if (res.code !== 200) return;
        this.list1 = res.data.result;
        this.total = res.data.total;
      });
    },
    handle(val) {
      if (val) {
        this.$set(this.search, 'remedyType', val);
      } else {
        this.$set(this.search, 'remedyType', '');
      }
      this.getList();
    },
    searchChange(e) { // Tabs切换的方法函数
      Object.assign(this.search, { 'orderStatus': e === '全部' ? '' : e });
      this.getList();
    },
    handlePaginationChange(pagination) { // 分页
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}
.el-button {
  color: rgb(114, 222, 236);
}
.numberOrder {
  color: #a7a7a7;
  margin-top: 20px;
  font-size: 14px;
  span {
    color: #51abab;
  }
}
.top {
  > div {
    margin-right: 10px;
  }
  // .moutend {
  //   margin-bottom: 20px;
  // }
  // .mounteds {
  //   margin: 20px 0;
  // }
}
.spn {
  float: right;
  .inputCss {
    width: 248px;
  }
}
</style>
